<template>
  <div>
    <el-row>
      <el-button type="primary" @click="addEntity">添加</el-button>
      <el-button type="danger" @click="deleteEntity">批量删除</el-button>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="url" label="地址" sortable width="300">
      </el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <el-button type="success" size="mini" v-if="scope.row.type == 1" round
            >目录</el-button
          >
          <el-button type="info" size="mini" v-if="scope.row.type == 2" round
            >菜单</el-button
          >
          <el-button type="warning" size="mini" v-if="scope.row.type == 3" round
            >按钮</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="entityEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteEntity(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用户" :visible.sync="entityDialogVisible" width="60%">
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜单类型" prop="type">
          <el-radio v-model="form.type" :label="1">目录</el-radio>
          <el-radio v-model="form.type" :label="2">菜单</el-radio>
          <el-radio v-model="form.type" :label="3">按钮</el-radio>
        </el-form-item>

        <el-form-item label="菜单名称" prop="urlName">
          <el-input v-model="form.urlName"></el-input>
        </el-form-item>

        <el-form-item label="url" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio v-model="form.status" :label="1">启用</el-radio>
          <el-radio v-model="form.status" :label="2">禁用</el-radio>
        </el-form-item>

        <el-form-item label="菜单顺序" prop="orderNum">
          <el-input v-model="form.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid">
          <el-input
            v-model="form.pname"
            readonly="readonly"
            @focus="openParentMenu"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="entityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择父菜单" :visible.sync="parentEntityDialogVisible">
      <div>
        <el-tree
          :data="parentMenuDate"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @node-drop="nodeChangeHandler"
          draggable
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="parentEntityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="parentEntityDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [],
      parentMenuDate: [
        {
          urlName: "用户管理",
          children: [
            {
              urlName: "添加用户",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      entityDialogVisible: false,
      parentEntityDialogVisible: false,
      form: {
        type: 1,
        pname: "",
        urlName: "测试Name",
        url: "http://localhost:8080/emp/save",
        status: 1,
        orderNum: 2,
      },
    };
  },

  methods: {
    nodeChangeHandler(bNode, aNode, inner) {
      console.log(bNode, aNode, inner);

      debugger;
      let param = { id: bNode.data.id };
      // 1.封装一个对象
      if (inner == "inner") {
        param.pid = aNode.data.id;
      } else {
        param.pid = aNode.data.pid;
      }

      // 2.使用封装的对象覆盖掉form
      this.form = param;

      // 3.发送请求
      this.formSubmit(); // update/save
    },
    getMenuTree() {
      var app = this;
      this.http({
        url: "menu/tree/1",
        method: "GET",
      }).then(({ data }) => {
        app.parentMenuDate = data.data;
        this.getEntityList();
      });
    },
    handleNodeClick(data, node, ztree) {
      this.form.pname = data.name;
      this.form.pid = data.id;
    },
    openParentMenu() {
      // 1.显示选择父菜单的组件
      this.parentEntityDialogVisible = true;

      // 2.查询菜单的数据
      this.getMenuTree();
    },
    addEntity() {
      this.entityDialogVisible = true;
    },

    deleteEntity(row) {
      if (row.id) {
        this.selectionId = [];
        this.selectionId.push(row.id);
      }
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.http({
            url: "menu/remove",
            method: "POST",
            data: this.selectionId, // 传递是选择的数据
          }).then(({ data }) => {
            if (data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getEntityList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    entityEdit(row) {
      this.http({
        url: "menu/info/" + row.id,
        method: "GET",
      }).then(({ data }) => {
        this.form = data.data;
        // 3.显示对话框
        this.entityDialogVisible = true;
      });
    },

    getEntityList() {
      let app = this;
      this.http
        .request({
          url: "menu/tree/0",
          method: "GET",
        })
        .then(({ data }) => {
          app.tableData = data.data;
        });
    },

    formSubmit() {
      var url = this.form.id ? "update" : "save";
      // 2.发送请求携带数据
      this.http({
        url: "menu/" + url,
        method: "POST",
        data: this.form,
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.entityDialogVisible = false;
          this.getEntityList();
        }
      });
    },
  },
  mounted() {
    this.getEntityList();
  },
};
</script>

<style>
</style>